<script setup>
import { ref, onMounted } from "vue";
import { useInView } from "./hooks/useImage.ts";
let imgList = new Array(1000).fill(11);
import { loginApi, protectedApi } from "@/api/api";
async function handleLogin() {
  let res = await loginApi();
  alert("登录成功");

  setTimeout(() => {
    alert("10秒后短token过期了");
  }, 10 * 1000);
}
//表单按钮
async function handleSubmit() {
  let res = await protectedApi();
  console.log(res);
}
let imageRef = ref(null);
useInView(imageRef);
</script>

<template>
  <button type="button" @click="handleLogin">登录</button>
  <div style="margin: 20px">
    <button type="button" @click="handleSubmit">表单确认按钮</button>
  </div>
  <div class="img-box" v-for="(item, index) in imgList" :key="index">
    <img
      class="img"
      ref="imageRef"
      src="https://via.placeholder.com/200"
      :data-src="`https://picsum.photos/200/${180 + index}`"
      alt=""
    />
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.img-box {
  width: 200px;
  height: 200px;
}
.img {
  width: 100%;
  height: 100%;
}
</style>
